<template>
    <div class="order-refund-detail">
        <van-nav-bar title="退款详情" left-arrow :border="false" @click-left="$router.back()" fixed placeholder/>
        <white-space/>
        <order-refund-detail-header :refund="refund"/>
        <white-space/>
        <order-refund-detail-info :refund="refund"/>
    </div>
</template>

<script>
  import { message, order } from "@mall/api-services"
  import OrderActions from "@/components/order/OrderActions"
  import Placeholder from "@/components/Placeholder"
  import OrderDetailInfo from "@/views/order/OrderDetailInfo"
  import Price from "@/components/Price"
  import OrderItem from "@/components/order/OrderItem"
  import WhiteSpace from "@/components/WhiteSpace"
  import OrderDetailHeader from "@/views/order/OrderDetailHeader"
  import { Cell, CellGroup, Icon, NavBar, NoticeBar, Toast } from "vant"
  import OrderRefundDetailHeader from "@/views/order/OrderRefundDetailHeader"
  import OrderRefundDetailInfo from "@/views/order/OrderRefundDetailInfo"

  export default {
    name: "OrderRefundDetail",
    components: {
      OrderRefundDetailInfo,
      OrderRefundDetailHeader,
      OrderActions,
      Placeholder,
      OrderDetailInfo,
      Price,
      OrderItem,
      WhiteSpace,
      OrderDetailHeader,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [NavBar.name]: NavBar,
      [NoticeBar.name]: NoticeBar,
      [Icon.name]: Icon,
    },
    props: {
      orderId: String,
      id: String,
    },
    data() {
      return {
        refund: new order.OrderRefund(),
      }
    },
    created() {
      this.refreshRefund()
    },
    methods: {
      refreshRefund() {
        const { orderId, id } = this
        Toast.loading()
        order.OrderServiceV1
          .getOrderRefund(orderId, id)
          .then(aRefund => this.refund = aRefund)
          .catch(({ response }) => Toast(message.getResponseMessage(response)))
          .finally(() => Toast.clear())
      },
    },
  }
</script>

<style lang="scss" scoped>
    .order-refund-detail {

    }
</style>
